<!-- 任务统计仪表板 -->
<script setup lang="ts">
import { MissionVO } from '@/api/mission/types';
import { MissionTypeNames, MissionPriorityNames, MissionStatusNames } from '@/api/mission/types';
import { MISSION_TYPE, MISSION_PRIORITY, MISSION_STATUS } from '@/constants';
import {
  TrendCharts,
  CircleCheck,
  Loading,
  WarningFilled,
  InfoFilled
} from '@element-plus/icons-vue';

interface Props {
  missions: MissionVO[];
}

const props = defineProps<Props>();

// 计算统计数据
const statistics = computed(() => {
  const total = props.missions.length;
  const completed = props.missions.filter(m => m.status === MISSION_STATUS.COMPLETED).length;
  const inProgress = props.missions.filter(m => m.status === MISSION_STATUS.IN_PROGRESS).length;
  const notStarted = props.missions.filter(m => m.status === MISSION_STATUS.NOT_STARTED).length;

  // 按类型统计
  const byType = {
    [MISSION_TYPE.NEW_FEATURE]: props.missions.filter(
      m => m.missionType === MISSION_TYPE.NEW_FEATURE
    ).length,
    [MISSION_TYPE.OPTIMIZATION]: props.missions.filter(
      m => m.missionType === MISSION_TYPE.OPTIMIZATION
    ).length,
    [MISSION_TYPE.BUG_FIX]: props.missions.filter(m => m.missionType === MISSION_TYPE.BUG_FIX)
      .length,
    [MISSION_TYPE.OTHER]: props.missions.filter(m => m.missionType === MISSION_TYPE.OTHER).length
  };

  // 按优先级统计
  const byPriority = {
    [MISSION_PRIORITY.HIGH]: props.missions.filter(m => m.priority === MISSION_PRIORITY.HIGH)
      .length,
    [MISSION_PRIORITY.MEDIUM]: props.missions.filter(m => m.priority === MISSION_PRIORITY.MEDIUM)
      .length,
    [MISSION_PRIORITY.LOW]: props.missions.filter(m => m.priority === MISSION_PRIORITY.LOW).length
  };

  // 平均进度
  const totalProgress = props.missions.reduce((sum, m) => sum + (m.progress || 0), 0);
  const avgProgress = total > 0 ? Math.round(totalProgress / total) : 0;

  return {
    total,
    completed,
    inProgress,
    notStarted,
    completionRate: total > 0 ? Math.round((completed / total) * 100) : 0,
    avgProgress,
    byType,
    byPriority
  };
});

// 图表数据
const chartData = computed(() => [
  {
    name: '待开始',
    value: statistics.value.notStarted,
    color: '#6b7280',
    icon: InfoFilled
  },
  {
    name: '进行中',
    value: statistics.value.inProgress,
    color: '#f59e0b',
    icon: Loading
  },
  {
    name: '已完成',
    value: statistics.value.completed,
    color: '#22c55e',
    icon: CircleCheck
  }
]);

// 优先级分布数据
const priorityData = computed(() => [
  {
    name: MissionPriorityNames[MISSION_PRIORITY.HIGH],
    value: statistics.value.byPriority[MISSION_PRIORITY.HIGH],
    color: '#ef4444'
  },
  {
    name: MissionPriorityNames[MISSION_PRIORITY.MEDIUM],
    value: statistics.value.byPriority[MISSION_PRIORITY.MEDIUM],
    color: '#f59e0b'
  },
  {
    name: MissionPriorityNames[MISSION_PRIORITY.LOW],
    value: statistics.value.byPriority[MISSION_PRIORITY.LOW],
    color: '#6b7280'
  }
]);

// 类型分布数据
const typeData = computed(() => [
  {
    name: MissionTypeNames[MISSION_TYPE.NEW_FEATURE],
    value: statistics.value.byType[MISSION_TYPE.NEW_FEATURE],
    color: '#22c55e'
  },
  {
    name: MissionTypeNames[MISSION_TYPE.OPTIMIZATION],
    value: statistics.value.byType[MISSION_TYPE.OPTIMIZATION],
    color: '#3b82f6'
  },
  {
    name: MissionTypeNames[MISSION_TYPE.BUG_FIX],
    value: statistics.value.byType[MISSION_TYPE.BUG_FIX],
    color: '#ef4444'
  },
  {
    name: MissionTypeNames[MISSION_TYPE.OTHER],
    value: statistics.value.byType[MISSION_TYPE.OTHER],
    color: '#6b7280'
  }
]);

// 获取进度条颜色
const getProgressColor = (progress: number) => {
  if (progress >= 80) return '#22c55e';
  if (progress >= 50) return '#3b82f6';
  if (progress >= 20) return '#f59e0b';
  return '#6b7280';
};
</script>

<template>
  <div class="mission-dashboard">
    <!-- 总览统计 -->
    <div class="overview-stats">
      <div class="stat-card primary">
        <div class="stat-icon">
          <el-icon><TrendCharts /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ statistics.total }}</div>
          <div class="stat-label">总任务数</div>
        </div>
      </div>

      <div class="stat-card success">
        <div class="stat-icon">
          <el-icon><CircleCheck /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ statistics.completed }}</div>
          <div class="stat-label">已完成</div>
        </div>
      </div>

      <div class="stat-card warning">
        <div class="stat-icon">
          <el-icon><Loading /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ statistics.inProgress }}</div>
          <div class="stat-label">进行中</div>
        </div>
      </div>

      <div class="stat-card info">
        <div class="stat-icon">
          <el-icon><TrendCharts /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ statistics.completionRate }}%</div>
          <div class="stat-label">完成率</div>
        </div>
      </div>
    </div>

    <!-- 图表统计 -->
    <div class="charts-section">
      <div class="chart-row">
        <!-- 状态分布 -->
        <div class="chart-card">
          <div class="chart-header">
            <span>任务状态分布</span>
          </div>
          <div class="chart-content">
            <div class="status-chart">
              <div
                v-for="(item, index) in chartData"
                :key="item.name"
                class="chart-item"
                :class="{ empty: item.value === 0 }"
              >
                <div class="chart-indicator">
                  <div class="color-dot" :style="{ backgroundColor: item.color }"></div>
                  <el-icon :style="{ color: item.color }">
                    <component :is="item.icon" />
                  </el-icon>
                </div>
                <div class="chart-info">
                  <span class="chart-name">{{ item.name }}</span>
                  <span class="chart-value">{{ item.value }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 优先级分布 -->
        <div class="chart-card">
          <div class="chart-header">
            <span>优先级分布</span>
          </div>
          <div class="chart-content">
            <div class="priority-chart">
              <div
                v-for="(item, index) in priorityData"
                :key="item.name"
                class="chart-item"
                :class="{ empty: item.value === 0 }"
              >
                <div class="priority-indicator">
                  <div
                    class="priority-bar"
                    :style="{
                      width: `${Math.max(item.value * 10, 4)}px`,
                      backgroundColor: item.color
                    }"
                  ></div>
                </div>
                <div class="chart-info">
                  <span class="chart-name">{{ item.name }}</span>
                  <span class="chart-value">{{ item.value }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="chart-row">
        <!-- 类型分布 -->
        <div class="chart-card full-width">
          <div class="chart-header">
            <span>任务类型分布</span>
          </div>
          <div class="chart-content">
            <div class="type-chart">
              <div
                v-for="(item, index) in typeData"
                :key="item.name"
                class="type-item"
                :class="{ empty: item.value === 0 }"
              >
                <div class="type-block">
                  <div class="type-color" :style="{ backgroundColor: item.color }"></div>
                  <div class="type-details">
                    <span class="type-name">{{ item.name }}</span>
                    <span class="type-count">{{ item.value }} 个</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 整体进度 -->
    <div class="progress-section">
      <div class="progress-card">
        <div class="progress-header">
          <div class="progress-title">
            <el-icon><TrendCharts /></el-icon>
            <span>整体完成进度</span>
          </div>
          <div class="progress-percentage">{{ statistics.avgProgress }}%</div>
        </div>
        <div class="progress-container">
          <div class="progress-track">
            <div
              class="progress-fill"
              :style="{
                width: `${statistics.avgProgress}%`,
                backgroundColor: getProgressColor(statistics.avgProgress)
              }"
            ></div>
          </div>
          <div class="progress-labels">
            <span>0%</span>
            <span>25%</span>
            <span>50%</span>
            <span>75%</span>
            <span>100%</span>
          </div>
        </div>
        <div class="progress-description">
          <span v-if="statistics.avgProgress >= 80" class="excellent">
            项目进展优秀，继续保持！
          </span>
          <span v-else-if="statistics.avgProgress >= 50" class="good">
            项目进展良好，需要继续努力！
          </span>
          <span v-else-if="statistics.avgProgress >= 20" class="normal">
            项目进展正常，建议加快进度！
          </span>
          <span v-else class="warning">项目进展缓慢，需要重点关注！</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.mission-dashboard {
  margin-bottom: 32px;
}

.overview-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}

.stat-card.success::before {
  background: linear-gradient(90deg, #22c55e, #16a34a);
}

.stat-card.warning::before {
  background: linear-gradient(90deg, #f59e0b, #d97706);
}

.stat-card.info::before {
  background: linear-gradient(90deg, #8b5cf6, #7c3aed);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  border-color: #3b82f6;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  flex-shrink: 0;
}

.stat-card.success .stat-icon {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.stat-card.warning .stat-icon {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stat-card.info .stat-icon {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.charts-section {
  margin-bottom: 32px;
}

.chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.chart-card {
  background: white;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  transition: all 0.3s ease;
}

.chart-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.full-width {
  grid-column: 1 / -1;
}

.chart-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f3f4f6;
  font-weight: 600;
  font-size: 16px;
  color: #1f2937;
}

.chart-content {
  padding: 20px 24px;
}

.status-chart {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 12px;
  background: #f8fafc;
  transition: all 0.2s ease;
}

.chart-item:hover:not(.empty) {
  background: #e0f2fe;
  transform: translateX(4px);
}

.chart-item.empty {
  opacity: 0.6;
}

.chart-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
}

.color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.chart-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chart-name {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

.chart-value {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  background: white;
  padding: 4px 12px;
  border-radius: 8px;
  min-width: 40px;
  text-align: center;
  border: 1px solid #e5e7eb;
}

.priority-chart {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.priority-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
}

.priority-bar {
  height: 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
  min-width: 4px;
}

.type-chart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.type-item {
  padding: 16px;
  border-radius: 12px;
  background: #f8fafc;
  transition: all 0.2s ease;
}

.type-item:hover:not(.empty) {
  background: #e0f2fe;
  transform: translateY(-2px);
}

.type-item.empty {
  opacity: 0.6;
}

.type-block {
  display: flex;
  align-items: center;
  gap: 12px;
}

.type-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
}

.type-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.type-name {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

.type-count {
  font-size: 12px;
  color: #6b7280;
}

.progress-section {
  margin-bottom: 0;
}

.progress-card {
  background: white;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  transition: all 0.3s ease;
}

.progress-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid #f3f4f6;
}

.progress-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.progress-percentage {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
}

.progress-container {
  padding: 20px 24px;
}

.progress-track {
  width: 100%;
  height: 12px;
  background: #f3f4f6;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  margin-bottom: 12px;
}

.progress-fill {
  height: 100%;
  border-radius: 6px;
  transition: all 0.8s ease;
  position: relative;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-20px);
  }
  100% {
    transform: translateX(20px);
  }
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.progress-description {
  padding: 16px 24px;
  text-align: center;
  background: #f8fafc;
  font-size: 14px;
  font-weight: 500;
}

.progress-description span {
  padding: 8px 16px;
  border-radius: 8px;
  display: inline-block;
}

.progress-description .excellent {
  color: #166534;
  background: #dcfce7;
}

.progress-description .good {
  color: #1e40af;
  background: #dbeafe;
}

.progress-description .normal {
  color: #92400e;
  background: #fef3c7;
}

.progress-description .warning {
  color: #991b1b;
  background: #fee2e2;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .overview-stats {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
  }

  .chart-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .overview-stats {
    grid-template-columns: 1fr;
  }

  .stat-card {
    padding: 20px;
  }

  .stat-value {
    font-size: 28px;
  }

  .type-chart {
    grid-template-columns: 1fr;
  }
}
</style>
